<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        .container {
            width: 600px;
            margin: 50px;
        }

        .box {
            float: right;
            width: 200px;
            height: 200px;
            font-size: 30px;
            font-weight: 600;
            text-align: center;
            line-height: 200px;
            border: 2px solid #000;
        }

        h2 {
            margin-top: 50px;
        }

        input[type="range"] {
            width: 300px;
        }

        .italic {
            font-style: italic;
        }

        .big {
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">宛在水中央</div>

        <h2>更改文本</h2>
        <input type="text" class="ipt">

        <h2>更改圆角大小</h2>
        <input type="range" min="0" max="50" value="0" class="change-border">

        <h2>风格</h2>
        <div class="btns">
            <button data-color="#3485ea">蔚蓝</button>
            <button data-color="#276c16">墨绿</button>
            <button data-color="#f2da65">淡黄</button>
            <button data-color="#cd0909">砂红</button>
        </div>

        <h2>文字样式</h2>
        <div class="font">
            <button>倾斜</button>
            <button>还原</button>
            <button>放大/缩小字体</button>
        </div>
    </div>

    <script src="../lib/jquery/jquery.min.js"></script>
    <script type="text/javascript">
        var $box = $(".box"),
            $ipt = $(".ipt"),
            $changeBorder = $(".change-border"),
            $btns = $(".btns"),
            $fonts = $(".font button");

        $ipt.on("change", function (){
            // console.log(this.value);
            $box.text(this.value);
        })

        $changeBorder.on("input", function (){
            // console.log(this.value);
            $box.css("border-radius", this.value + "%");
        })

        $btns.on("click", "button", function (){
            // console.log(this.dataset.color);
            $box.css({
                color: this.dataset.color,
                borderColor: this.dataset.color
            })
        })

        $fonts.eq(0).click(function (){
            $box.addClass("italic");
        })
        $fonts.eq(1).click(function (){
            $box.removeClass("italic");
        })
        $fonts.eq(2).click(function (){
            $box.toggleClass("big");
        })
    </script>
</body>
</html>